<template>
  <div ref="iconSelectRef" :style="{ width: props.width }">
    <el-popover :visible="popoverVisible" :width="props.width" placement="bottom-end">
      <template #reference>
        <div @click="popoverVisible =!popoverVisible">
          <slot>
            <el-input v-model="selectedIcon" readonly placeholder="点击选择图标" class="reference">
              <template #prepend>
                <!-- 根据图标类型展示 -->
                <el-icon v-if="isElementIcon">
                  <component :is="selectedIcon.replace('el-icon-', '')" />
                </el-icon>
              </template>
              <template #suffix>
                <!-- 清空按钮 -->
                <el-icon
                    v-if="selectedIcon"
                    style="margin-right: 8px"
                    @click.stop="clearSelectedIcon"
                >
                  <CircleClose />
                </el-icon>

                <el-icon
                    :style="{
                    transform: popoverVisible? 'rotate(180deg)' : 'rotate(0)',
                    transition: 'transform.5s',
                  }"
                >
                  <ArrowDown @click.stop="togglePopover" />
                </el-icon>
              </template>
            </el-input>
          </slot>
        </div>
      </template>

      <!-- 图标选择弹窗 -->
      <div ref="popoverContentRef">
        <el-input v-model="filterText" placeholder="搜索图标" clearable @input="filterIcons" />
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
          <el-tab-pane label="Element图标" name="element">
            <el-scrollbar height="300px">
              <ul class="icon-grid">
                <li
                    v-for="menuIcon in filteredElementIcons"
                    :key="menuIcon"
                    class="icon-grid-item"
                    @click="selectIcon(menuIcon)"
                >
                  <el-icon>
                    <component :is="menuIcon" />
                  </el-icon>
                </li>
              </ul>
            </el-scrollbar>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-popover>
  </div>
</template>

<script setup>
import { ref, computed, onMounted,watch } from 'vue';
import {onClickOutside} from '@vueuse/core'
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import { CircleClose, ArrowDown } from '@element-plus/icons-vue';

const props = defineProps({
  modelValue: {
    default: ''
  },
  width: {
    default: '500px'
  }
});

const emit = defineEmits(['update:modelValue']);

const iconSelectRef = ref();
const popoverContentRef = ref();
const popoverVisible = ref(false);
const activeTab = ref('element');

const elementIcons = ref(Object.keys(ElementPlusIconsVue));
const selectedIcon = ref(props.modelValue);
const filterText = ref('');
const filteredElementIcons = ref(elementIcons.value);

const isElementIcon = computed(() => {
  console.log(5959599)
  return selectedIcon.value;
});


function handleTabClick(tabPane) {
  console.log(tabPane)
  console.log(4444)
  activeTab.value = tabPane.props.name;
  filterIcons();
}

function filterIcons() {

  filteredElementIcons.value = filterText.value
      ? elementIcons.value.filter((icon) =>
          icon.toLowerCase().includes(filterText.value.toLowerCase())
      )
      : elementIcons.value;
}

function selectIcon(icon) {
  console.log(icon)
  const iconName = icon ;
  emit('update:modelValue', iconName);
  selectedIcon.value = iconName;
  console.log(selectedIcon)
  console.log(props.modelValue)
  popoverVisible.value = false;
}

function togglePopover() {
  popoverVisible.value =!popoverVisible.value;
}

onClickOutside(iconSelectRef, () => (popoverVisible.value = false), {
  ignore: [popoverContentRef]
});

/**
 * 清空已选图标
 */
function clearSelectedIcon() {
  selectedIcon.value = '';
}

onMounted(() => {
  console.log(11)

  if (selectedIcon.value) {
    console.log(selectedIcon.value)
    if (elementIcons.value.includes(selectedIcon.value)) {
      activeTab.value = 'element';
    }
  }
});

// 监听 props.modelValue 的变化
watch(() => props.modelValue, (newValue) => {
  selectedIcon.value = newValue;
});
</script>

<style scoped lang="scss">
.reference :deep(.el-input__wrapper),
.reference :deep(.el-input__inner) {
  cursor: pointer;
}

.icon-grid {
  display: flex;
  flex-wrap: wrap;
}

.icon-grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  margin: 4px;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  transition: all 0.3s;
}

.icon-grid-item:hover {
  border-color: #4080ff;
  transform: scale(1.2);
}
</style>